@charset "UTF-8";



@import "./components/swiper/swiper.min";
@import "./components/swiper/animate.min";
@import "./swiper";
@import "./iscroll"; 
i{
	font-style: normal;
}
a{
	text-decoration: none;
} 
li{
	list-style: none;
}
 #scroller ul{
    background: white;
}
body{
	height: 1000px;
}

 #scroller ul li{
    padding: 0 10px;      
  	background: repeat-x bottom left url();
    background-color: #fafafa;  
    display: flex; 
	flex-direction: row;
	
}

.skill{
	display: flex; 	
	flex-direction:column ;
	margin-left:50px;	
}
#scroller ul li i{
	width: 250px;
	padding: 3px 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#scroller li img{
	height: 100px;
	width: 100px;
	align-content: center;
	padding: 10px 0px;
}
#footer {  
    position: absolute;  
    z-index: 2;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    height: 45px;  
    background: #444;  
    padding: 0;     
} 
 #footer ul{
 	width: 100%;
 	height: 100%;
 	display: flex;
 	flex-direction:row;	
 }
 #footer ul li{
 	flex: 1;
 	/*border-right: 1px solid white;*/
 } 
#footer ul a{
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	color: white;
	
}
#footer ul i,span{
	display: block;
}

// #project{
// 	width: 100%;
// 	height: 100%;
// }
// #project ul{
// 	width: 100%;
// 	height: 100%;
	
// }
#project ul{
	position: relative;
}
#project ul li{
	background: repeat-x bottom left url();
    background-color: #fafafa;  
    display: flex; 
	flex-direction: column;
}
.wraplist{
	position: absolute;
	width: 90%;
	height: 450px;
	margin: 18% 5%;
	background: white;
	font-size:16px;
	opacity: 0;
	
}
.wraplist i{
	line-height: 20px;
}
.wraplist:nth-child(1){
	opacity: 1;
}
.wraplist img{
	margin-top: 10px;
	margin-left: 40px;
	width:300px;
	height: 200px;
}

#project ul li ul{
	text-align: center;
	width: 250px;
	display: flex; 
	flex-direction: column;
	margin-top: 5px;
	margin-left: 18%;
}
#project ul li ul li{
	padding: 3px 0px;
	
}

#experience ul li{
	background: repeat-x bottom left url();
    background-color: #fafafa;  
    display: flex; 
	flex-direction: column;
}
#experience ul li .list{
	display: flex; 
	flex-direction: column;
}
#experience ul li .list div{
	padding:3px 0px;
}
.category{
	font-size:18px;
	color:blue;
}
.level{
	font-size:18px;
	color:green;
}
.ani{
	width: 100%;
    height: 100%;
	
}
.ani img{
	width: 100%;
    height: 100%;
}
#project{
	height: 100%;
	background-image:url(../images/beijing.jpg);
	background-size: 100% 100%;
}
#experience{
	height: 100%;
	background-image:url(../images/beijing.jpg);
	background-size: 100% 100%;
}
#experience ul{
	position: relative;
}
#experience ul li{
	position: absolute;
	width: 90%;
	height: 450px;
	margin: 16% 22px;
	background: white;
	font-size:16px;

}
#experience img{
	margin-top: 10px;
	margin-left: 40px;
	width:300px;
	height: 220px;
}
#experience  li .list{
	text-align: center;
}

#experience li{
	opacity: 0;
}
#experience ul .list0{
	opacity: 1;
}
#me{
	height: 100%;
	background-image:url(../images/beijing.jpg);
	background-size: 100% 100%;
}

#wodebox{
    width:90%;
    height:400px;
	margin-left:22px;
	margin-top:40px;
	margin-right:10px; 
	background:white;
	-webkit-box-shadow:4px 2px 4px #333333; 
    -moz-box-shadow:3px 2px 4px #333333;
}
#wodetou{
	width:100%;
	position:relative;
	left:10px;
	top:20px;
}
#wodeimg{
	width:60px;
	height:60px;
}
#wodeimgimg{
	width:60px;
	height:60px;
	border-radius: 50%;
}
#wodename{
	position:absolute;
	left:70px;
	top:5px;
	font-size: 18px;
	font-weight:bold;
}
#wodeage{
	position: absolute;
	top:30px;
	left:70px;
	font-size: 16px;
}
#schoolimg{
	width:76%;
	height:28%;
	position:absolute;
	top:132px;
	left:26px;
	margin-left: 6%;
}
#wodegeyan{
	width:86%;
	height:60px;
	position:absolute;
	left:26px;
	top:361px;
	font-family:"Times New Roman",Georgia,Serif;
	color:teal;
}

#bcid {
	background:#0F0;
	height:480px;
	width:360px;
	

}


